<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>头部样式</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__common.css" />
    <style>
        .aui-bar-nav .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 0.75rem;
            color: #E73C5C;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 2.4rem;
        }

        .aui-bar-nav {
            background-color: #fff;
        }

        .aui-icon-tu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__left.png') no-repeat 0.5rem center;
            background-size: 22px 22px;
        }

        .aui-bar-nav .aui-pull-right {
            padding-right: 0.75rem;
        }

        .aui-bar-nav .aui-title {
            font-size: 0.9rem;
            color: #333333;
            font-weight: 500;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }

        body {
            background: rgba(0, 0, 0, 0.2);
            padding-top: 106px;
        }

        .title {
            /*position: relative;*/
            background: white;
            height: 2.3rem;
            line-height: 2.45rem;
            width: 100%;
            padding: 0 0.75rem;
            /*text-align: center;*/
            color: #282828;
            font-size: 0.8rem;
            /*font-weight: bold;*/
        }

        .cancel {
            /*position: absolute;*/
            /*top: 50%;*/
            /*right: 0.8rem;*/
            /*transform: translateY(-50%);*/
            color: #282828;
            font-size: 0.75rem;
        }

        .city-area {
            position: relative;
            overflow: scroll;
        }

        .city-slide {
            position: fixed;
            right: 0;
            bottom: 7.2rem;
            width: 1.225rem;
            background: white;
            overflow-y: scroll;
            padding-top: 1rem;
        }

        .slide-item {
            padding: 0.15rem 0;
            text-align: center;
            color: #333333;
            background-color: rgba(0, 0, 0, 0);
            font-size: 0.6rem;
            background: white;
        }

        .location {
            background: #ffffff;
            padding-left: 0.8rem;
            padding-top: 0.8rem;
        }

        .location .name {
            color: #999999;
            font-size: 0.7rem;
            margin-bottom: 0.75rem;
        }

        .locate {
            display: inline-flex;
            align-items: center;
            min-width: 2.45rem;
            height: 1.5rem;
            border-radius: 0.875rem;
            background: white;
            position: relative;
            text-align: center;
            margin-right: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .locate:before {
            content: '';
            height: 199%;
            width: 201%;
            position: absolute;
            top: -51%;
            left: -51%;
            border-radius: 1.75rem;
            border: 1px solid #DBDBDB;
            transform: scale(0.5);
            -webkit-transform: scale(0.5);
            -ms-transform: scale(0.5);
            -moz-transform: scale(0.5);
            -o-transform: scale(0.5);
            font-size: 1.1rem;
        }

        .locate1:before {
            content: '';
            height: 199%;
            width: 201%;
            position: absolute;
            top: -51%;
            left: -51%;
            border-radius: 1.75rem;
            border: 1px solid #E0474C;
            transform: scale(0.5);
            -webkit-transform: scale(0.5);
            -ms-transform: scale(0.5);
            -moz-transform: scale(0.5);
            -o-transform: scale(0.5);
            font-size: 1.1rem;
        }

        .icon-location3 {
            /*width: 0.85rem;*/
            height: 0.85rem;
            /*background: url("__IMG__location3.png") center center no-repeat;*/
            background-size: 0.85rem 0.85rem;
            margin-left: 0.25rem;
            margin-right: 0.4rem;
        }

        .city-name {
            color: #3D3D3D;
            font-size: 0.7rem;
            padding-right: 0.5rem;
        }

        .city-name1 {
            color: #E73C5C;
        }

        .item-title {
            color: #3D3D3D;
            font-size: 0.7rem;
            padding-left: 0.8rem;
            height: 2rem;
            line-height: 1.25rem;
            background: #F8F8F8;
        }

        .city-list {
            background-color: white;
            padding-left: 0.8rem;
            padding-right: 1.875rem;
        }

        .city-item {
            height: 2.05rem;
            background-color: white;
            color: #282828;
            font-size: 0.8rem;
            line-height: 2.05rem;
        }

        .choose {
            display: inline-block;
            font-size: 0.8rem;
            color: #282828;
            /*margin-left: 0.5rem;*/
        }

        .qgx {
            width: 100%;
            height: 1px;
            background: #DBDBDB;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5)
        }

        .qgx2 {
            position: absolute;
            top: 2.3rem;
            left: 0;
            z-index: 10000;
        }

        .icon_pic {
            width: 0.8rem;
            height: 0.8rem;
            /*background: url("__IMG__location3.png") no-repeat ;*/
            background-size: 100%;
            margin-top: 0.8rem;
        }

        .dingwei {
            float: left;
        }

        .font {
            color: #B3B3B3;
            font-size: 0.6rem;
            line-height: 2.65rem;
            margin-left: 0.5rem;
        }
        .city-slide {
            position: fixed;
            right: 0;
            bottom: 5rem;
            width: 1.225rem;
            background: white;
            overflow-y: scroll;
            padding-top: 1rem;
        }
    </style>
</head>
<body>
<div class="l_box"  id="loading2"><img src="__IMG__loading.gif" alt="" id="loading"></div>

<header class="aui-bar aui-bar-nav underLine" style="padding-top:25px;position:fixed;top:0;left:0;z-index:10000;" id="header">
    <a class="aui-pull-left" tapmode="active" onclick="history.go(-1)"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
    <div class="aui-title">选择城市</div>
</header>
<div style="display:flex;flex-flow:column;position: absolute;top: 3.65rem;left: 0;right:0;bottom: 0;background: white">
    <!-- <div class="qgx"></div> -->
    <div class="title flex-wrap">
        <div class='choose'>当前定位:</div>
        <div class="cancel" id='city' style="margin-left: 0.5rem;">
            <div class="flex-wrap">
                <img class='icon_pic' src="__IMG__position@3x.png" alt="">
                <div class="dingwei" id="dingwei">北京</div>
                <div class="font">GPRS定位</div>
            </div>
        </div>
    </div>
    <div class="qgx qgx2"></div>
    <div class="city-area" style="flex: 1;">
        <div class="location " name="#" id="hotcity">
            <div class="name">热门城市</div>


        </div>
        <div class="city-slide" id="render-item-1"></div>
        <div id="render-item-2">

        </div>
    </div>
</div>
<div class="toast-wrap">
    <span class="toast-msg"></span>
</div>
</body>
<script type="text/template" id="template-item-1">
	</script>
<script type="text/template" id="template-item-2">

	</script>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript" src="__JS__pinyin_dict_firstletter.js"></script>
<script type="text/javascript" src="__JS__pinyinUtil.js"></script>
<script type="text/javascript" src="__JS__doT.min.js"></script>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__common.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=GZSILhN6GDZpDkdku64uWWnGTgTBQmzX"></script>
<script type="text/javascript" charset="utf-8">
    //-------------获取地理位置----------------
    //擅长特殊，如果点完了不查询，哎~~~
    wx.config({$json});
    wx.ready(function () {
        wx.error(function(res){
            alert("接口调取失败")
        });
        wx.checkJsApi({
            jsApiList: [
                'getLocation'
            ],
            success: function (res) {
                if (res.checkResult.getLocation == false) {
                    alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
                    return;
                }
            },
            error:function (res) {
                alert('res-error')
            }
        });
        wx.getLocation({
            success: function (res) {
                //1、微信接口获取用户经纬度
                var lon = res.longitude;
                var lat = res.latitude;
                //2、用经纬度用百度地图换区物理位置
                var point = new BMap.Point(lon, lat);
                var geoc = new BMap.Geocoder();
                geoc.getLocation(point, function (rs) {
                    var addComp = rs.addressComponents;
//                    var sheng = addComp.province;
                    var shi = addComp.city;
//                    $('#dingwei').val(sheng);
                    $('#dingwei').text(shi);
                });

            },
            cancel: function (res) {
                alert('获取位置失败');
            }
        });
    });


</script>
<script type="text/javascript">
    var name,card,mechanism_id,shi;
    getUrlParam11();
    // 解析上个页面传来的参数
    function getUrlParam11() {
        var urlname=window.location.search;
        if (urlname.indexOf("?") != -1) {
            name=decodeURI(urlname.split('=')[1]);
            card=decodeURI(urlname.split('=')[2]);
            mechanism_id=decodeURI(urlname.split('=')[3]);
            shi=decodeURI(urlname.split('=')[4]);

        }else {
            return null;
        }
    }
    function render_jigou(data){
        var html="";
        var arr1=data[0];
        var arr2=data[1];
        for(var i=0;i<arr1.length;i++){
            html+='<div class="item">';
            html+='<div class="item-title" style="background-color:#F5F5F5;height:1.25rem;" data-name='+arr1[i]+'>'+arr1[i]+'</div>';
            html+='<div class="city-list">';
            for(var j=0;j<arr2[arr1[i]].length;j++){
                html+='<div class="city-item underLine  aaa" data-id='+arr2[arr1[i]][j].district_id+' tapmode onclick="choose_city(this)">'+arr2[arr1[i]][j].district+'</div>';
            }
            html+='</div></div>';
        }
        return html;
    }
    //获取城市名和id，返回上个页面
    function choose_city(A) {
        save(A.dataset.id);
    }
    function save(agenumber_obj) {
        var data2={
            name:name,
            card:card,
            mechanism_id:mechanism_id,
            shi:agenumber_obj

        };
        $.ajax({
            url:'{:url("My/approveFirst")}',
            data:data2,
            type:'POST',
            dataType:'JSON',
            success: function(data){
                if (data.status=='200') {
                    toast('保存成功');
                    location.href='{:url("My/zhiyuanzhe_renzheng1")}';
                }else {
                    toast(data.msg);
                }

            },
            error: function(xhr, type){
                toast('无网络或连接超时，请重试！');
                // 即使加载出错，也得重置

            }
        });
    }
    function render_zimu(data){
        var html="";
        var arr1=data[0];
        for(var i=0;i<arr1.length;i++){

            html+='<div class="slide-item" tapmode onclick="scrollToTag(\''+arr1[i]+'\')">'+arr1[i]+'</div>'
        }
        return html;
    }
    $(function () {
        initData();
    })

    var json = {
        'citys': []
    }; //存储本页需要得dot数据

    var dz_json; //接口返回得完整得地址数据
    var obj = {};
    function initData () {
        loaddingOpen();
        $.ajax({
            url:'{:url("My/getArea")}',
            type:'POST',
            dataType:'JSON',
            success: function(data){
//                var loading2=document.getElementById('loading2');
//                var loading1=document.getElementById('loading');
//                loading1.style.display='none';
//                loading2.style.display='none';
                loaddingClose();

                if (data.status==200) {
                    dz_json = data.data;
                    for (var i = 0; i < dz_json.length; i++) {
                        for (var j = 0; j < dz_json[i].shi.length; j++) {
                            json.citys.push(dz_json[i].shi[j]);
                        }
                    }
                    control_json(); //渲染城市列表
                    // 获取热门城市
                    initData2();
                }else {
                    toast(data.msg);
                }

            },
            error: function(xhr, type){
                loaddingClose();

                toast('无网络或连接超时，请重试！');
                // 即使加载出错，也得重置

            }
        });
        // var parame = {
        //     values: {
        //
        //     }
        // };
        // doAjax(GETAREA, "POST", parame, function(data) {
        //成功执行函数
        // console.log(JSON.stringify(data));
        // if (data.status == '200') {
        // console.log(a)

        //
        // for (var i = 0; i < a.data.length; i++) {
        //
        //     json.citys.push(a.data[i].shi);
        // }

        // console.log(JSON.stringify(json.citys));

        // control_json(); //渲染城市列表

        //默认值展示
        // var now_city = $api.getStorage('now_city');
        // if (now_city.indexOf("市") >= 0) {
        //     now_city = now_city.replace("市", "");
        // }
        // $api.byId('now_city').innerHTML = now_city;
        //默认值展示

        // } else {
        //     api.toast({
        //         msg: data.msg,
        //         duration: 2000,
        //         location: 'middle'
        //     });
        // }
        // }, function(errorData) {
        //     //失败执行函数
        // });
    }
    function initData2 () {
        loaddingOpen();
        $.ajax({
            url:'{:url("My/getHotArea")}',
            type:'POST',
            dataType:'JSON',
            success: function(data){
                loaddingClose();

                if (data.status==200) {
                    gethotcitylist(data.data);

                }else {
                    toast(data.msg);
                }

            },
            error: function(xhr, type){
                loaddingClose();

                toast('无网络或连接超时，请重试！');
                // 即使加载出错，也得重置

            }
        });
    }

    function gethotcitylist(data) {
        var html='';
        html+='<div class="name">热门城市</div>';
        for (var i=0;i<data.length;i++) {
            html+='<div class="locate locate1" onclick="choose_city(this)" data-id="'+data[i].district_id+'">';
            html+='<div class="icon-location3 "></div>';
            html+='<div class="city-name city-name1" data-id="'+data[i].district_id+'" >'+data[i].district+'</div>';
            html+='</div>';
        }
        $('#hotcity').html(html);

    }
    function control_json () {
        console.log(json);
        for (var i = 0; i < json.citys.length; i++) {
            var key = pinyinUtil.getFirstLetter(json.citys[i].district[0]);
            if (obj[key]) {
                obj[key].push(json.citys[i]);
            } else {
                obj[key] = [];
                obj[key].push(json.citys[i]);
            }
        }

        var keysArr = Object.keys(obj).sort();
        var renderData = [];
        renderData[0] = keysArr;
        renderData[1] = obj;

        $('#render-item-1').html(render_zimu(renderData));
        $('#render-item-2').html(render_jigou(renderData));
    }
    //跳转到指定页面
    function scrollToTag (tag) {
        var title2=document.getElementsByClassName('item-title');
        for(var i=0;i<title2.length;i++){
            if (title2[i].dataset.name==tag)  {
                title2[i].scrollIntoView(true);
            }
        }

    }

</script>
</html>
